<template>
  <view class="app-container submit-result-page">
    <view class="submit-result">
      <view class="icon-box">
        <u-icon name="checkmark-circle-fill" size="96" color="#FF7947"></u-icon>
      </view>
      <view class="title">支付成功</view>
      <view class="desc">可以在房管家-入住账单中查看到您的账单信息</view>
      <view class="btn-box">
        <view class="btn" @click="toCenter()">
          <u-button color="#FF7947" text="返回个人中心" shape="circle" style="margin-top: 40rpx" plain></u-button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        marginTop: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#FF7947'
      },
      billId: '',
    };
  },
  onLoad(opt) {
    this.billId = opt.billId
  },
  methods: {
    toCenter() {
      this.$tab.switchTab('/pages/manager/index')
    }
  },

}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.submit-result-page {
  height: 100vh;
  background-color: #fff;

  .submit-result {
    background-color: #fff;
    padding-top: 200rpx;
    text-align: center;
    box-sizing: border-box;

    .icon-box {
      margin-bottom: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
    }

    .title {
      font-size: 36rpx;
      color: #000;
      font-weight: bold;
    }

    .desc {
      font-size: 24rpx;
      color: #595959;
      margin-top: 10px;
    }

    .btn-box {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn {
        width: 520rpx;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }

    }
  }
}

</style>
